<template>
  <div class="history">
    <div class="leftcontainer">
      <el-input
        placeholder="输入关键字进行过滤"
        class="realtimeInput"
        v-model="input"
      ></el-input>
      <el-tree
        :data="engineerTree"
        :props="props"
        @node-click="handleNodeClick"
        :filter-node-method="filterNode"
        ref="tree"
      ></el-tree>
    </div>
    <div class="rightcontainer">
      <div v-if="Object.keys(deviceInfo).length == 0" class="notList">
        请选择设备查看
      </div>
      <div v-else class="container">
        <el-card class="box-card">
          <div slot="header" class="clearfix header">
            <span>工程信息</span>
          </div>
          <el-form :model="deviceInfo.engineer" label-position="left">
            <el-row>
              <el-col :span="12">
                <el-form-item label="工程编号">
                  <span>{{ deviceInfo.engineer.serial_number }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="工程名称">
                  <span>{{ deviceInfo.engineer.name }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="工程类型">
                  <span>{{ deviceInfo.engineer.type }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="工程状态">
                  <el-tag
                    type="succees"
                    v-if="deviceInfo.engineer.status === '监测中'"
                    size="small"
                    >监测中</el-tag
                  >
                  <el-tag
                    type="info"
                    v-if="deviceInfo.engineer.status === '已完成'"
                    size="small"
                    >已完成</el-tag
                  >
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="开始时间">
                  <span>{{ deviceInfo.engineer.begin_time | fmtTime }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="结束时间">
                  <span v-if="deviceInfo.engineer.end_time !== null">{{
                    deviceInfo.engineer.end_time | fmtTime
                  }}</span>
                  <span v-else>未完成</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row> </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="工程地址">
                  <span>{{ deviceInfo.engineer.address }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="工程负责人">
                  <span>{{ deviceInfo.engineer.charge_name }}</span>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
        <el-card class="box-card" v-if="deviceInfo">
          <div slot="header" class="clearfix header">
            <span>设备信息</span>
          </div>
          <el-form :model="deviceInfo" label-position="left">
            <el-row>
              <el-col :span="12">
                <el-form-item label="工程设备">
                  <span>{{ deviceInfo.serial_number }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="设备名称">
                  <span>{{ deviceInfo.name }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="绑定状态">
                  <el-tag
                    type="succees"
                    v-if="deviceInfo.bind_status === 1"
                    size="small"
                    >已绑定</el-tag
                  >
                  <el-tag type="danger" v-else size="small">未绑定</el-tag>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="在线状态">
                  <el-tag
                    type="succees"
                    v-if="deviceInfo.online_status === 1"
                    size="small"
                    >在线</el-tag
                  >
                  <el-tag type="danger" v-else size="small">离线</el-tag>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import { get, postJSON, del } from "@/utils/request.js";

export default {
  data() {
    return {
      engineerTree: [],
      props: {
        // value: "id",
        label: "name",
        children: "children",
      },
      value: [],
      input: "",
      resData: {},
      params: {
        page: 1,
        pageSize: 15,
      },
      cellStyle: {
        height: "20px",
        fontSize: "12px",
      },
      engineerInfo: {},
      deviceInfo: {},
    };
  },
  created() {
    this.getEngineer();
  },
  watch: {
    input(val) {
      this.$refs.tree.filter(val);
    },
  },
  methods: {
    //事件监听
    handleNodeClick(obj, node) {
      // console.log(obj);
      if (obj.engineer_id) {
        this.params.id = obj.id;
        this.getDeviceInfo();
      }
    },
    handleCurrentChange(page) {
      this.params.page = page;
      this.getDeviceHistory();
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    //网络请求
    getEngineer() {
      get("/engineer/findEngineerDeviceTree").then((res) => {
        this.engineerTree = res.data;
      });
    },
    getDeviceInfo() {
      get("/device/findDeviceDetail", this.params).then((res) => {
        this.deviceInfo = res.data;
        console.log(this.deviceInfo);
      });
    },
  },
};
</script>

<style>
.history {
  position: absolute;
  top: 0.5em;
  bottom: 0.5em;
  width: 100%;
  display: flex;
}
.leftcontainer {
  width: 250px;
  padding-right: 10px;
  margin-right: 10px;
  border-right: 1px solid #ddd;
}
.rightcontainer {
  flex: 1;
}
.realtimeInput {
  height: 50px;
}
.notList {
  width: 100%;
  padding-top: 50px;
  font-size: 20px;
  text-align: center;
  flex: 1;
}
.header {
  font-size: 18px;
  font-weight: 700;
}
.box-card {
  margin-top: 15px;
  width: 100%;
}
</style>